<!DOCTYPE html>
<html>

	<head>
		<!-- <meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes"> -->
		 <meta http-equiv="X-UA-Compatible" content="ie=edge">
	    <meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
	    <meta name="format-detection"content="telephone=no, email=no" />
	    <meta name="apple-mobile-web-app-capable" content="yes" /><!-- 删除苹果默认的工具栏和菜单栏 -->
	    <meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 设置苹果工具栏颜色 -->
	    <meta name=”renderer” content="ie-comp">
	    <meta name=”renderer” content=”ie-stand”>
	    <meta name="renderer" content="webkit"> 
	    <meta name="keywords" content="耀盛中国,耀盛智投,理财产品,智选财富,耀盛智投官网"/>
	    <meta name="description" content="耀盛智投为耀盛中国旗下理财产品智选平台。专注于为大众富裕阶层、精英个人、中产阶级家庭、合规机构等提供定制化资产配置咨询推荐服务，帮助客户实现财富的增值。" />
	    <title>产品列表</title>
	     <script src="../lib/js/ftSize.js"></script>
		<link rel="stylesheet" href="../lib/css/_base.css">
    	<link rel="stylesheet" type="text/css" href="../lib/css/p_index.css">
		<link rel="stylesheet" href="../lib/css/mescroll.min.css">
        <link rel="stylesheet" href="../lib/css/swiper-3.3.1.min.css">
        <script>
            let wpuserToken=window.sessionStorage.getItem('wpuserToken');
            function goMine(){
                if(wpuserToken=='' || wpuserToken==null){
                    window.location.href="../login/login.html"
                }else{
                    window.location.href="../mine/index.html"
                }
            } 
        </script>
		<style type="text/css">
			
			.header{
				background: #fff;
			}
			.P_top,.scrollx{
				border-bottom: 1px solid #EBEBEB;
				background: #fff;
			}
			/*菜单*/
			.scrollx{
				height: 0.9rem;
				overflow: hidden;
			}
			.scrollx-content{
				width: 100%;
				overflow-x: auto;
				white-space: nowrap;
				overflow-y: hidden;
			}
			.nav {
				padding: 0 0.16rem 0 0.2rem;
				height: 0.9rem;
				
			}
			.nav li{
				display: inline-block;
				font-size:.3rem;
				height: 0.6rem;
				
				vertical-align: middle;
			}
			.nav .active{

				color: #AE915F;
			}
			/*列表*/
			.swiper-container{
				position: fixed;
				top: 2rem;
				left: 0;
				right: 0;
				bottom: 0;
			}
			/*展示上拉加载的数据列表*/
			.data-list li{
				/*position: relative;
				padding: 10px 8px 10px 120px;
				border-bottom: 1px solid #eee;*/
			}
			.data-list .pd-img{
				/*position: absolute;
				left: 18px;
				top: 18px;
				width: 80px;
				height: 80px;*/
			}
			.data-list{
				padding: 0 0.35rem;
			}
			.data-list .pd-name{
				font-size: 16px;
				line-height: 20px;
				height: 40px;
				overflow: hidden;
			}
			.data-list .pd-price{
				margin-top: 8px;
				color: red;
			}
			.data-list .pd-sold{
				font-size: 12px;
				margin-top: 8px;
				color: gray;
			}
			/*隐藏*/
			.hide{display: none;}
			.mescroll-totop {
			    z-index: 9990;
			    position: fixed;
			    right: 0.1rem;
			    bottom: 2rem;
			    width: 0.72rem;
			    height: 0.72rem;
			    border-radius: 50%;
			    opacity: 0;
            }
            .mescroll-upwarp{
                min-height: 0.30rem!important;
                padding:0 0 1rem 0!important; 
            }
			
		</style>
	</head>

	<body>
		<!--标题-->
		<div class="header">
			<ul class="P_top" id="productStyle"> 
                <li><span >网贷</span></li>
                <li><span>保险</span></li>
            </ul>
             <!-- projectBanner区域 -->
            <p class="P_title" id="product-credit-banner">
                网贷产品由耀盛中国旗下平台九斗鱼提供 
            </p>
            <!-- inseranceBanner区域 -->
			<div class="scrollx mescroll-touch-x" id="insuranceBanner">
				<div id="scrollxContent" class="scrollx-content">
					<ul id="nav" class="nav">
						<li class="active" i="0">全部</li>
						<li i="1">大病险</li>
						<li i="2">医疗险</li>
						<li i="3">航旅险</li>
						<li i="4">意外险</li>
						<li i="5">寿险</li>
						<li i="6">理财</li>
						<li i="7" style="padding:0 0.2rem 0 0rem">特色</li>
					</ul>
				</div>
			</div>
        </div>
        <!-- 网贷 -->
        <section class="home-setions P_list product-main" id="product-credit-business">
            <ul class="P_list_ul" id="product-list-page">
            </ul>
        </section>
		<!--保险-->
		<div id="swiper" class="swiper-container">
		    <div id="swiperWrapper" class="swiper-wrapper">
	        	<!--全部-->
		        <div id="mescroll0" class="swiper-slide mescroll">
					<div id="dataList0" class="data-list">
					</div>
		        </div>
	        	<!--大病险-->
		        <div id="mescroll1" class="swiper-slide mescroll">
					<div id="dataList1" class="data-list"> </div>
		        </div>
	        	<!--医疗险-->
		        <div id="mescroll2" class="swiper-slide mescroll">
					<div id="dataList2" class="data-list"> </div>
		        </div>
	        	<!--航旅险-->
		        <div id="mescroll3" class="swiper-slide mescroll">
					<div id="dataList3" class="data-list"> </div>
		        </div>
	        	<!--意外险-->
		        <div id="mescroll4" class="swiper-slide mescroll">
					<div id="dataList4" class="data-list"> </div>
		        </div>
	        	<!--寿险-->
		        <div id="mescroll5" class="swiper-slide mescroll">
					<div id="dataList5" class="data-list"> </div>
		        </div>
	        	<!--理财-->
		        <div id="mescroll6" class="swiper-slide mescroll">
					<div id="dataList6" class="data-list"> </div>
		        </div>
	        	<!--特色-->
		        <div id="mescroll7" class="swiper-slide mescroll">
					<div id="dataList7" class="data-list"> </div>
		        </div>		    	
		    </div>
		</div>
		<footer id="footer" style="display:block;">
            <div class="footerActive" id="foot-body"> 
                <a href="../home/index.html"> <i id="startPage"></i><small>首页</small></a>
                <a href="../productList/index.html" class="iconActive"><i id="centerPage"></i><small>产品列表</small></a>
                <a href="javascript:;" onClick="goMine()"><i id="endPage"></i><small>我的</small></a></div>
        </footer>
	</body>
	<script src="../lib/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="../lib/js/iscroll.js"></script>
	<script src="../lib/js/mescroll.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../lib/js/swiper-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
	<!--mescroll本身不依赖jq,这里为了模拟发送ajax请求-->
	<script src="../lib/js/public-header.js"></script> 
	
<script type="text/javascript" charset="utf-8">
    $("#productStyle li").eq(1).find('span').addClass("inlistActive")
    $('#product-credit-business').hide();
    $('#product-credit-banner').hide();
    $('#swiper').show();
    $('#insuranceBanner').show()
   
    $("#productStyle li").click(function() {  
        let styleIndex=$(this).index();
        $("#productStyle li").find('span').removeClass("inlistActive"); 
        $(this).find('span').addClass("inlistActive"); 
        if(styleIndex==0){
            $('#product-credit-business').show();
            $('#product-credit-banner').show();
            $('#swiper').hide();
            $('#insuranceBanner').hide()
        }else{
            $('#product-credit-business').hide();
            $('#product-credit-banner').hide();
            $('#swiper').show();
            $('#insuranceBanner').show()
        }
       
    });  


$(function(){
 /* 网贷传递的数据 */
    function grabLoanJson() {
        var json = {
            "token":" ",
            "clientInfo":"W,100,IE8",
            "requestTime": formatDateTime(startTime),
            "faceCode":"project/grabLoan",
            "body":{"type":"2"},
        }
        return json;
    }
    /* 保险传递的数据 */
    /* 网贷 */
    $('#product-list-page').html(`<p id="projectAlert">正在加载中，请稍候...</p>`)
    $.ajax({  
        type: "POST",
        url: httpServer+"project/grabLoan",
        headers:{
            'Access-Control-Allow-Origin':'*'
        }, 
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(grabLoanJson()),
        dataType: "json",
        success: function (creditShow) {
            if(creditShow.resCode!='0'){
                oneError(creditShow)
            }else{
                var creditList=''
                if(creditShow.body!=[]){
                    creditShow=creditShow.body
                    $.each(creditShow,function(ids,ele){
                        let baserateEm=''
                        if(ele.afterRate=='0.00'){
                            baserateEm=''
                        }else{
                            baserateEm=`<em class="credit-home-afterBase">+`+ele.afterRate+`%</em>`;
                        }
                        creditList+=`<a href="`+ele.jumpUrl+`"><li>
                                <div class="credit-home-title"> `+ele.projectName+`</div>
                                <div class="credit-home-left">
                                    <span class="credit-home-rate block">
                                        <em class="credit-home-baseBase">`+ele.baseRate+`%</em>`+baserateEm+`
                                    </span>
                                    <span class="credit-home-borrow block">
                                        借款利率
                                    </span>
                                </div>
                                <div class="credit-home-right">
                                    <span class="creadit-home-limit block">
                                            项目期限 `+ele.formatInvestTime+ele.investTimeUnit+`
                                    </span>
                                    <span class="credit-home-means block">
                                            `+ele.refundTypeNote+`
                                    </span>
                                </div>
                            </li></a>`;
                            
                    })
                    $('#product-list-page').html(creditList)
                }else{
                }  
            } 
        },
        error: function(error){  
        console.log(error,2);  
        }    
    }); 





 /*保险------------- */          
			//导航菜单
			var mescrollArr=new Array(12);//每个菜单对应一个mescroll对象
			//当前菜单下标
			var curNavIndex=0;
			//初始化首页
			mescrollArr[curNavIndex]=initMescroll(curNavIndex);
			/*初始化轮播*/
			var swiper=new Swiper('#swiper', {
		        onTransitionEnd: function(swiper){
		        	var i=swiper.activeIndex;//轮播切换完毕的事件
		        	changePage(i);
			    }
		    });
		     function insuranceJson(type,Page,pageSize) {
	            var json = {
	                "faceCode":"insurance/list",//保险产品列表
	                "token":"",    
	                "clientInfo":"W,100,IE8",  
	                "requestTime": formatDateTime(startTime),
	                "body":{
	                    "type":type,
	                    "pageNow":Page,
	                    "pageSize":pageSize
	                }
	            }
	            return json;
	        }
		    /*菜单点击事件*/
			$("#nav li").click(function(){
				var i=Number($(this).attr("i"));
				swiper.slideTo(i);//以轮播的方式切换列表
			})
			
			/*切换列表*/
			function changePage(i) {
				if(curNavIndex!=i) {
					//更改列表条件
					var curNavDom;//当前菜单项
					$("#nav li").each(function(n,dom){
						if (dom.getAttribute("i")==i) {
							dom.classList.add("active");
							curNavDom=dom;
						} else{
							dom.classList.remove("active");
						}
					});
					//菜单项居中动画
					var scrollxContent=document.getElementById("scrollxContent");
					var star = scrollxContent.scrollLeft;//当前位置
					var end = curNavDom.offsetLeft + curNavDom.clientWidth/2 - document.body.clientWidth/2; //居中
					mescrollArr[curNavIndex].getStep(star, end, function(step,timer){
						scrollxContent.scrollLeft=step; 
					});
					//隐藏当前回到顶部按钮
					mescrollArr[curNavIndex].hideTopBtn();
					if(mescrollArr[i]==null){
						mescrollArr[i]=initMescroll(i);
					}else{
						var curMescroll=mescrollArr[i];
						var curScrollTop=curMescroll.getScrollTop();
						if(curScrollTop>=curMescroll.optUp.toTop.offset){
							curMescroll.showTopBtn();
						}else{
							curMescroll.hideTopBtn();
						}
					}
					curNavIndex=i;
				}
			}
			/*创建MeScroll对象*/
			function initMescroll(index){
				//创建MeScroll对象,内部已默认开启下拉刷新,自动执行up.callback,刷新列表数据;
				var mescroll = new MeScroll("mescroll"+index, {
					//上拉加载的配置项
					up: {
						callback: getListData,
						isBounce: false, 
						noMoreSize: 4, 
						empty: {
							icon: "../lib/images/myriad.png", //图标,默认null
							tip: "暂无相关数据~", //提示
							btntext: "去逛逛 >", //按钮,默认""
							btnClick: function(){//点击按钮的回调,默认null
								//alert("点击了按钮,具体逻辑自行实现");
							} 
						},
						clearEmptyId: "dataList"+index,
						toTop:{ //配置回到顶部按钮
							src : "../lib/images/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
							//offset : 1000
						},
						isBounce:false
					}
				});
				return mescroll;
			}
			/*联网加载列表数据  page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
			function getListData(page){
				var dataIndex=curNavIndex; 
				getListDataFromNet(dataIndex, page.num, page.size, function(pageData,totalSize){
					mescrollArr[dataIndex].endBySize(pageData.length, totalSize); 
					setListData(pageData,dataIndex);
				}, function(){
	                mescrollArr[dataIndex].endErr();
				});
			}
			function setListData(pageData,dataIndex){
				var listDom=document.getElementById("dataList"+dataIndex);
				for (var i = 0; i < pageData.length; i++) {
					var pd=pageData[i];
					var str=""
					str+=`<a href="InsuranceDetails/index.html?projectId=${pd.id}"><dl><dt><img src="${pd.imageUrl}" alt=""></dt><dd>
                                <p class="home-insurance-title">${pd.projectName}</p>
                                <p class="home-insurance-subtitle">${pd.projectInfo}</p>
                                <p class="home-insurance-price"><em> ${pd.premium}</em>元/起</p>
	                        </dd>
	                    </dl></a>`
					
					var liDom=document.createElement("div");
					liDom.innerHTML=str;
					listDom.appendChild(liDom);
				}
			}
			function getListDataFromNet(curNavIndex,pageNum,pageSize,successCallback,errorCallback) {
                setTimeout(function () {
                	$.ajax({
		                type: "POST",
		                url: httpServer+"insurance/list",
		                headers:{
		                    'Access-Control-Allow-Origin':'*'
		                }, 
		                async:false,
		                contentType: "application/json; charset=utf-8",//``+curNavIndex+``
		               data: JSON.stringify(insuranceJson(``+curNavIndex+``,pageNum,10)),
		                dataType: "json",
		                success: function(data){
		                	if(data.resCode!='0'){
                                oneError(data)
		                	}else{
		                		if(data.body!=[]||data.body!=null){
		                			var listData=[];
		                			successCallback(data.body.insuranceList,data.body.totleRows);
		                		}else{

		                		}
		                	}
		                	
		                },
		                error: errorCallback
		            });
                },500)
			}
			
});
</script>
</html>